<!DOCtype html>
<html ng-app="advertiserApp">
	 <head>
	     <meta charset= "utf-8"/>
		 <title>已投放广告</title>
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/angular/angular.min.js"></script>
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/jquery/dist/jquery.min.js"></script>		 		 
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap/dist/js/bootstrap.min.js"></script>			
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/js/mainApp.js"></script>			 			 
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/controller/advertiserCtrl.js"></script>	        	
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/js/main.js"></script>	
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap/dist/css/bootstrap.min.css" />
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/styles/layout.css" />
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/styles/main.css" />
		 <link rel="shortcut icon" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/favicon.ico" />
		 <link rel="bookmark" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/favicon.ico" />
		 <style type="text/css">
		     .selectAdModalOption{outline:none;border:1px solid #eee;width:60%;margin:20px auto;overflow:auto}
			 .selectAdModalOption option{padding:10px 0 10px 10px}
		 </style>
	 </head>
	 <body ng-controller="advertiserCtrl">	
         <div class="headerBox"></div>
         <div class="nav"><ul></ul></div>
		 <div class="content">
         <!-- begin -->		 
		     <div class="websiteMapBox">
			     <span>当前页面></span>
				 <span>已投放广告</span>
			 </div>
			 <div class="itemAdGroup">
			 	<div class="topTitle">
			 		<button class="btn btn-primary btnTitle">投放时间</button>
			 		<button class="modifyBtn btn btn-primary" data-toggle="modal" data-target=".dateModal">修改</button>
			 	</div>
			 	<div class="adDescribe" style="margin-left: 150px;">
			 		<span>投放时间:</span>
			 		<span id="adDescribeTimeBegin">2014年12月15日</span>至<span id="adDescribeTimeEnd">2014年12月8日</span>
			 	</div>
			 </div>
			 <div class="itemAdGroup">
			 	<div class="topTitle">
			 		<button class="btn btn-primary btnTitle">广告名称</button>
			 	</div>
			 	<div class="adDescribe " style="margin-left: 150px;">
			 		<span>广告名称:</span>
			 		<span>玉兰油</span>
			 		<img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/ADselect_pic.png">
			 	</div>
			 </div>
			 <div class="itemAdGroup">
			 	<div class="topTitle">
			 		<button class="btn btn-primary btnTitle">投放金额</button>
			 		<!-- <button class="modifyBtn btn btn-primary">修改</button> -->
			 	</div>
			 	<div class="adDescribe " style="margin-left: 150px;">
			 		<span>投放金额:</span>
			 		<div style="background: #ccc;width: 600px;height: 60px;border-radius: 5px;display: inline-block;line-height: 60px;">
			 			<div><span id="setTotal">200000</span>(元)</div>
			 			<button class="modifyBtn btn btn-primary" style="right: 450px;top: 80px;" data-toggle="modal" data-target=".setTotalModal" onclick="modalDialog.setTotalValue($(this))">修改</button>
			 		</div><br><br><br>
			 		<span>投放单价:</span>
			 		<div style="background: #ccc;width: 600px;height: 60px;border-radius: 5px;display: inline-block;line-height: 60px;">
			 			<div><span id="setPrice">100</span>(元/次)</div>
			 			<button class="modifyBtn btn btn-primary" style="right: 450px;top: 190px;" data-toggle="modal" data-target=".setPriceModal" onclick="modalDialog.setPriceValue($(this))">修改</button>
			 		</div>
			 	</div>
			 </div>
		     <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">广告终端格式</button>				 
				 </div>
				 <div class="adClient right">
				     <div class="left">
					     <img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/padIcon.png" alt="">
						 <span>PAD</span>
					 </div>
					 <div class="center">
					     <img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/padPeople.png" alt="">
					 </div>
					 <div class="right" style="width:auto">
					     <p><span>投放金额：</span><span>3000</span>(元)</p>
					     <p><span>投放单价：</span><span>30</span>(元/次)</p>
					 </div>
					 <div class="clear"></div>
				 </div>
				 <div class="clear"></div>
			 </div>
		     <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">投放渠道</button>				 
				 </div>
				 <div class="adDitch right">
				     <div class="adDitchAll left">
					     <div>
						     <input type="checkbox"checked="checked"/>
						     <label>默认</label>
						     <label>投放全渠道</label>
						 </div>
						 <button class="btn btn-primary" data-toggle="modal" data-target=".selectAdDitchModal" onclick="modalDialog.selectAdDitchShow($(this))">修改</button>
					 </div>
					 <ul class="right listGroup">
					     <li>
						     <img class="left" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test1.png" alt=""> 
						     <button class="btn btn-primary left">国家地理</button>
						     <div class="right">
					             <p><span>投放金额：</span><span>3000</span>(元)</p>
					             <p><span>投放单价：</span><span>30</span>(元/次)</p>
					         </div>
							 <div class="clear"></div>
						 </li>
						 <li>
						     <img class="left" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png" alt=""> 
						     <button class="btn btn-primary left">国家地理</button>
						     <div class="right">
					             <p><span>投放金额：</span><span>3000</span>(元)</p>
					             <p><span>投放单价：</span><span>30</span>(元/次)</p>
					         </div>
							 <div class="clear"></div>
						 </li>
						 <li>
						     <img class="left" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test3.png" alt=""> 
						     <button class="btn btn-primary left">国家地理</button>
						     <div class="right">
					             <p><span>投放金额：</span><span>3000</span>(元)</p>
					             <p><span>投放单价：</span><span>30</span>(元/次)</p>
					         </div>
							 <div class="clear"></div>
						 </li>
						 <li>
						     <img class="left" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test4.png" alt=""> 
						     <button class="btn btn-primary left">国家地理</button>
						     <div class="right">
					             <p><span>投放金额：</span><span>3000</span>(元)</p>
					             <p><span>投放单价：</span><span>30</span>(元/次)</p>
					         </div>
							 <div class="clear"></div>
						 </li>
					 </ul>
					 <div class="clear"></div>
				 </div>
				 <div class="clear"></div>
			 </div>			 
			 <!-- <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">广告类别属性</button>				 
				 </div>
				 <div class="adTarget">
				     <ul>
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget1.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget2.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget3.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget4.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget5.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget6.png" alt=""></li>							 
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget6.png" alt=""></li>							 
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget6.png" alt=""></li>							 
					 </ul>
				 </div>
				 <div class="clear"></div>
			 </div>
			 <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">兴趣爱好</button>				 
				 </div>
				 <div class="adTarget">
				     <ul>
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget1.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget2.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget3.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget4.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget5.png" alt=""></li>					   
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget6.png" alt=""></li>							 
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget6.png" alt=""></li>							 
					     <li><img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/adTarget6.png" alt=""></li>							 
					 </ul>
				 </div>
				 <div class="clear"></div>
			 </div> -->
			 <a href="" class="btn btn-primary modifyImgSignBtn" >投放</a>
		 <!-- end -->
		 </div>	
		 <!-- 日期 -->
		 <div class="modal fade dateModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-lg">
                 <div class="modal-content">			        
					 <div class="modal-body" style="text-align:center;margin-top:40px">	
                         <div class="form-group form-inline" style="margin-bottom:40px">
						     <input type="text" value="" data-date-include="first" class="form-control"/>
							 至
						     <input type="text" value="" data-date-include="last" class="form-control"/>
						 </div>						 
						 <div class="form-group form-inline">
						     <button class="btn btn-primary"  onclick="modalDialog.dateModal($(this))">确定</button>
						     <button class="btn btn-primary" style="margin-left:82px;" data-dismiss="modal">取消</button>
						 </div>
						 <script type="text/javascript">
						     $('[data-date-include="first"],[data-date-include="last"]').datetimepicker({
				                 minView: "month", 
				                 language:  'zh-CN',
				                 format: 'yyyy-mm-dd',
				                 todayBtn:  1,
				                 autoclose: 1,
							 });
							 var modalDialog = {						     
							     dateModal:function(ele){
								     var dom = ele.parent("div.form-group").siblings(".form-inline");							     
									 if(dom.find("input").eq(0)&&dom.find("input").eq(1)){
									     $("#adDescribeTimeBegin").text(dom.find("input").eq(0).val());
									     $("#adDescribeTimeEnd").text(dom.find("input").eq(1).val());										 
									 }
									 ele.next().trigger("click"); 
								 },
								 setTotal:function(ele){
								     var dom = ele.parent("div.form-group").siblings(".form-inline");
									 if(dom.find("input").val()){
									     $("#setTotal").text(dom.find("input").val());
									 }	
									 ele.next().trigger("click");
								 },
								 setTotalValue:function(ele){
								     var showDom = $("#setTotal");
									 if(showDom.text()){
									     $(".setTotalModal").find("#setTotalModalValue").val(showDom.text());
									 }
								 },
								 setPrice:function(ele){
								     var dom = ele.parent("div.form-group").siblings(".form-inline");
									 if(dom.find("input").val()){
									     $("#setPrice").text(dom.find("input").val());
									 }							 
									 ele.next().trigger("click");
								 },
								 setPriceValue:function(ele){
								     var showDom = $("#setPrice");
									 if(showDom.text()){
									     $(".setPriceModal").find("#setPriceModalValue").val(showDom.text());
									 }
								 },
								 selectAdDitch:function(ele){
				                     var dom = ele.parent("div.form-group").siblings("select.selectAdModalOption");
					                 if(dom.val()){	
                                         var valDom = dom.children("option").eq(dom.val()),name=valDom.attr("data-adName"),
						                 price = valDom.attr("data-price"),total = valDom.attr("data-total"),img = valDom.attr("data-img");						 					            
										 var itemHtml = '<li><img class="left" src="'+img+'" alt="">'+ 
						                 '<button class="btn btn-primary left">'+name+'</button><div class="right">'+
					                     '<p><span>投放金额：</span><span>'+total+'</span>(元)</p><p><span>投放单价：</span><span>'+price+'</span>(元/次)</p>'+
					                     '</div><div class="clear"></div></li>'
						                 modalDialog.selectAdDom.parent(".adDitchAll").next("ul.listGroup").append(itemHtml);
						                 ele.next().trigger("click");
					                 }else{
					                     alert("您尚未选择渠道，请选取后再操作！")
					                 }				 					 				     
				                 },
				                 selectAdDitchDom:"",
				                 selectAdDitchShow:function(ele){
				                     modalDialog.selectAdDom = ele;
				                 },
				                 /**selectAdDitchDel:function(ele){
				                     ele.parent("p").remove();
				                 }**/
							 }
						 </script>
					 </div>					
                 </div>
             </div>
         </div>
		 <!-- 投放金额 -->
		 <div class="modal fade setTotalModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-sm">
                 <div class="modal-content">
                     <div class="modal-header" style="text-align:center">当前投放金额</div>				 
					 <div class="modal-body" style="text-align:center;margin-top:40px">	
                         <div class="form-group form-inline" style="margin-bottom:40px">
						     <input type="text" id="setTotalModalValue" class="form-control"/>
						 </div>						 
						 <div class="form-group form-inline">
						     <button class="btn btn-primary"  onclick="modalDialog.setTotal($(this))">确定</button>
						     <button class="btn btn-primary" style="margin-left:82px;" data-dismiss="modal">取消</button>
						 </div>						 
					 </div>					
                 </div>
             </div>
         </div>
		 <!-- 投放单价 -->
		 <div class="modal fade setPriceModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-sm">
                 <div class="modal-content">			        
					 <div class="modal-body" style="text-align:center;margin-top:40px">	
                         <div class="form-group form-inline" style="margin-bottom:40px">
						     <label>投放单价</label>
							 <input type="text" id="setPriceModalValue" class="form-control" style="width:150px;"/>
							 <label>元/次</label>
						 </div>						 
						 <div class="form-group form-inline">
						     <button class="btn btn-primary"  onclick="modalDialog.setPrice($(this))">确定</button>
						     <button class="btn btn-primary" style="margin-left:82px;" data-dismiss="modal">取消</button>
						 </div>						 
					 </div>					
                 </div>
             </div>
         </div>
		 <!-- 选择渠道 -->
		 <div class="modal fade selectAdDitchModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-lg">
                 <div class="modal-content">
			         <div class="modal-header" style="font-size:20px;font-weight:700;text-align:center">					     
						 <label>选择投放渠道</label>
					 </div>
					 <div class="modal-body" style="text-align:center">	                       	
                         <select class="selectAdModalOption"  size="5">
						     <option value="0" data-adName="testAd1" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd1</option>
						     <option value="1" data-adName="testAd2" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd2</option>
						     <option value="2" data-adName="testAd3" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd3</option>
						     <option value="3" data-adName="testAd4" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd4</option>
						     <option value="4" data-adName="testAd5" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd5</option>
						     <option value="5" data-adName="testAd6" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd6</option>
						     <option value="6" data-adName="testAd7" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd7</option>
						     <option value="7" data-adName="testAd8" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd8</option>
						     <option value="8" data-adName="testAd9" data-price="100" data-total="10,000" data-img="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/test2.png">testAd9</option>						     
						 </select>						 
						 <div class="form-group form-inline">
						     <button class="btn btn-primary" style="margin-left:74px;" onclick="modalDialog.selectAdDitch($(this))">确定</button>
						     <button class="btn btn-primary" style="margin-left:82px;" data-dismiss="modal">取消</button>
						 </div>
					 </div>					
                 </div>
             </div>
        </div>
	 </body>
</html>